import React from "react";
import { R } from "../tools";
import { SvgIcon, Icons } from "../res/svgicons";
import { useNavigation } from "@react-navigation/native";

interface Props {
  paddingStart?: number;
  marginBottom?: number;
  color?: string;
}
export default function HeaderBackButton(props: Props) {
  const navigation = useNavigation();
  const IconSize = 36,
    scale = 0.03,
    color = props.color ?? "#333";

  let { paddingStart, marginBottom } = props;
  paddingStart = paddingStart ?? 14;
  marginBottom = marginBottom ?? -5;
  function _backHanlder() {
    navigation.goBack();
  }
  return (
    <R.TouchableOpacity
      onPress={_backHanlder}
      style={[{
        paddingStart: paddingStart,
        marginBottom: marginBottom,
      },styles.button]}
      activeOpacity={1.0}
    >
      <SvgIcon name={Icons.back} color={color} size={IconSize} scale={scale} />
    </R.TouchableOpacity>
  );
}

const styles = R.StyleSheet.create({
    button: {
        justifyContent: "center",
        alignItems: "center"
    }
})